import React from 'react'
import BaseComponent from 'basecomponent'
import {withRouter} from 'react-router'
import './style.scss'
import {Link} from 'react-router'
import classNames from 'classnames'


class LinkNavbar extends BaseComponent{

  constructor() {
    super(...arguments);
    this.state={
      key:[],
    }
  }

  componentDidMount(){
    this.keyArr = [];
  }
  componentWillReceiveProps(nextProps){
    this.keyArr.push(nextProps.location.key);
    this.setState({key:this.keyArr})
  }

  render(){
    const{routes,location} = this.props;
    const{key} = this.state;
    return(
      <div className={'link-navbar-wrapper'}>
        <span>当前位置：</span>
        {
          routes && routes.map(function (item,index) {
            if(index>=3){
              let path = '';
              routes.map(function (it,i) {
                if(i>=2 && i<=index){
                  path = path+'/'+it.path
                }
              });
              return(
              <div className={'link-wrapper'}>
                {
                  (index>3 && index!=routes.length)&&<span>&gt;</span>
                }
                <Link to={{pathname:path+`?_k=${key[index-2]}`}}>
                  <div className={classNames({current:path===location.pathname})}>{item.name}</div>
                </Link>
              </div>
              )
            }
          })
        }
      </div>
    );
  }
}

export default withRouter(LinkNavbar);
